<template>
    <div>
        <List :nameList="nameList">
            <template #header>
                <h2 class="header">0516学生列表</h2>
            </template>

            <template #nameItem="{ person }">
                <li :style="{ background: person.age < 18 ? 'red' : '' }">
                    {{ person.name }}------{{ person.age }}
                </li>
            </template>
        </List>
    </div>
</template>

<script>
import List from "./components/List";
export default {
    name: "App",
    components: {
        List,
    },
    data() {
        return {
            nameList: [
                { id: "001", name: "张三", age: 20 },
                { id: "002", name: "李四", age: 10 },
                { id: "003", name: "王五", age: 22 },
                { id: "004", name: "赵六", age: 14 },
                { id: "005", name: "郑七", age: 50 },
                { id: "006", name: "老八", age: 41 },
                { id: "007", name: "小九", age: 12 },
            ],
        };
    },
};
</script>

<style scoped>
.typeList {
    display: flex;
    justify-content: space-around;
}

.header {
    background: orchid;
}
</style>
